import React, { memo,useEffect,useRef,useState  } from 'react'
import PropTypes from 'prop-types'

import { HomeWrapper } from './style'
import { useNavigate } from 'react-router-dom'
import { connect } from 'react-redux'
import { fetchHomeData } from '../../store/home/actionCreators'



const ControlCpn = memo((props) => {
  const [currentIndex,setIndex] = useState(0)
  function getItem(item,index){
    setIndex(index)
  }
  return (
    <div className='list' ref={props.itemRef}>
    {
      props.tabs.map((item,index) => {
        return (
          <div 
            className={currentIndex === index?'active':'item'} 
            onClick={e =>getItem(item,index)} 
            key={index}>
            {item}
          </div>
        )
      })
    }
  </div>
  )
})

// ControlCpn.defaultProps = {
//   tabs:[]
// }
ControlCpn.propTypes = {
  tabs:PropTypes.array
}




const Home = memo((props) => {
  console.log(props.goodPrice,'goodPrice')
  const tabs = ["北京","上海","广州","深圳","杭州","合肥","a","b","c","d"]
  const [posIndex, setPosIndex] = useState(0)
  const [showRight, setShowRight] = useState(false)
  const [showLeft, setShowLeft] = useState(false)
  const itemRef = useRef()
  const totalDistanceRef = useRef()
  useEffect(() => {
    const scrollWidth = itemRef.current.scrollWidth // 一共可以滚动的宽度
    const clientWidth = itemRef.current.clientWidth // 本身占据的宽度
    const totalDistance = scrollWidth - clientWidth
    totalDistanceRef.current = totalDistance 
    setShowRight(totalDistance > 0)
  }, [props.children])

  function controlClickHandle(isRight){
    const newIndex = isRight? posIndex + 1 : posIndex - 1
    const newEl = itemRef.current.children[newIndex]
    const newOffsetLeft = newEl.offsetLeft
    itemRef.current.style.transform = `translate(-${newOffsetLeft}px)`
    setPosIndex(newIndex)
    setShowRight(totalDistanceRef.current > newOffsetLeft)
    setShowLeft(newOffsetLeft > 0)
  }
  const navigate = useNavigate()
  function goTo(){
    navigate('/about')
  }
  function fetchHandle(){
    
    props.getData()
    
  }
  return (
    <HomeWrapper bgcolor="#409ef5">
      <button onClick={goTo}>go about</button>
     <div className='content'>
      <div className='btn'>
        { showLeft && <span className='left' onClick={e =>controlClickHandle(false)}>{'<'}</span> } 
        { showRight && <span className='right' onClick={e =>controlClickHandle(true)}>{'>'}</span> }
      </div>
       <div className='cpn'>
        <ControlCpn tabs={tabs} itemRef={itemRef} />
       </div>
       <hr />
       <h1>home---reducer</h1>
       <button onClick={fetchHandle}>fetchData</button>
       {
        props.goodPrice.map(item =>{
          return <li key={item.id}>{item.name}</li>
        })
       }
     </div>
     
    </HomeWrapper>
  )
})

const mapStateToProps = (state) =>({
  goodPrice:state.home.goodPrice
})
const mapDispatchToProps = (dispatch) =>({
  getData(){
    dispatch(fetchHomeData())
  }
})

export default connect(mapStateToProps,mapDispatchToProps)(Home)